<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.keyWord" placeholder="关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getBrands">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="brands" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="name" label="品牌名称" width="120" sortable>
			</el-table-column>
			<el-table-column prop="englishName" label="英文名称" width="150" sortable>
			</el-table-column>
			<el-table-column prop="logo" label="logo" width="150" sortable>
				<template scope="scope">
					<img :src="'http://172.16.4.163/'+scope.row.logo" height="50"/>
				</template>
			</el-table-column>
			<el-table-column prop="productType.name" label="类型" width="150" sortable>
			</el-table-column>
			<el-table-column prop="description" label="描述" min-width="180" sortable>
			</el-table-column>
			<el-table-column label="操作" width="150">

				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<!--  scope.$index 行索引      scope.row  该行数据  -->
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<!--label 表单组件的信息  prop  验证使用-->
				<el-form-item label="品牌名称" prop="name">
					<el-input v-model="editForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="英文名称" prop="englishName">
					<el-input v-model="editForm.englishName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="类型" prop="productTypeId">
					<el-input v-model="editForm.productTypeId" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="logo">
					<!--
                    action 必选参数, 上传的地址
                    on-remove : 删除的回调
                    file-list : 上传的文件列表
                    -->
					<el-upload
							class="upload-demo"
							action="http://localhost:9527/services/common/fastdfs"
							:on-remove="handleRemoveLogo"
							:file-list="logoList"
							:on-success="handleSuccess"
							:multiple="false"
							:before-upload="handleBeforeUpload"
							list-type="picture">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="描述">
					<el-input type="textarea" v-model="editForm.description"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<!--
		v-model  true/false 模态框是否显示
		elementui组件有方法，我们只有获取到组件对象后才能调用他的方法
		如何去获取到组件对象
		(1)组件上添加 ref属性
		(2)this.$refs.addForm 获取到组件对象
		  -->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false" size="tiny">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<!--label 表单组件的信息  prop  验证使用-->
				<el-form-item label="品牌名称" prop="name">
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="英文名称" prop="englishName">
					<el-input v-model="addForm.englishName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="类型" prop="productTypeId">
					<el-cascader
								 :options="productTypes"
								 :props = "props"
								 v-model="addForm.productTypeId"
								 style="width: 360px"
								 size="small">
					</el-cascader>
				</el-form-item>
				<el-form-item label="logo">
					<!--
                    action 必选参数, 上传的地址
                    on-remove : 删除的回调
                    file-list : 上传的文件列表
                    -->
					<el-upload
							class="upload-demo"
							action="http://localhost:9527/services/common/fastdfs"
							:on-remove="handleRemoveLogo"
							:file-list="logoList"
							:on-success="handleSuccess"
							:multiple="false"
							:before-upload="handleBeforeUpload"
							list-type="picture">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="描述">
					<el-input type="textarea" v-model="addForm.description"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
    import util from '../../common/js/util'
    //import NProgress from 'nprogress'
    import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';

    export default {
        data() {
            return {
                productTypes:[],
                logoList:[],
				props:{
                    label:"name",
					value:"id"
				},
                filters: {
                    keyWord: ''
                },
                pageSize:10,
                brands: [],
                total: 0,
                page: 1,
                listLoading: false,
                sels: [],//列表选中列

                editFormVisible: false,//编辑界面是否显示
                editLoading: false,
                editFormRules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ]
                },
                //编辑界面数据
                editForm: {
                    name: '',
                    englishName:'',
                    productTypeId:null,
                    description:'',
                    logo:''
                },

                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ]
                },
                //新增界面数据
                addForm: {
                    name: '',
                    englishName:'',
                    productTypeId:null,
                    description:'',
					logo:''
                },
                options: [{

                }],
            }
        },
        methods: {
            //上传之前限制只能穿一张图
            handleBeforeUpload(){
                if (this.logoList.length>0){
                    this.$message({
						message:"一次只能上传一张图片！",
						type:error
					})
					return false;
                }
			},
            //logo上传成功的钩子函数
            handleSuccess(response, file, fileList){
                console.debug(response)
                this.addForm.logo = response.resultObj;
                this.editForm.logo = response.resultObj;
                this.logoList = fileList;
            },
            loadProductTypes() {
                this.$http.get("/product/productType/list").then(result=>{
                    this.productTypes = result.data;
				})
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getBrands();
            },
            //删除图片
            handleRemoveLogo(file, fileList){
                console.debug("file",file)
                console.debug("fileList",fileList)
                this.logoList = fileList;
            },
            //获取品牌列表
            getBrands() {
                this.listLoading = true;
                //NProgress.start();
                this.$http.post("/product/brand/json",{
                    pageNum:this.page,
                    pageSize:this.pageSize,
                    keyWord:this.filters.keyWord
                }).then(res=>{
                    this.listLoading = false;
                    let pageList = res.data;
                    this.brands = pageList.rows;
                    this.total = pageList.total;
                })
            },
            //删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    //确定删除
                    this.listLoading = true;
                    //NProgress.start();
                    this.$http.delete("/product/brand/delete/"+row.id)
                        .then((res)=>{
                            this.listLoading = false;
                            if(res.data.success){
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                //重写加载页面
                                this.getBrands();
                            }else{
                                //失败的提示
                                this.$message({
                                    message: res.data.message,
                                    type: 'error'
                                });
                            }
                        })
                })
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
                this.editForm.logo = null;
            },
            //显示新增界面
            handleAdd: function () {
                this.addFormVisible = true;
                this.addForm = {
                    name: '',
                    englishName:'',
                    productTypeId:null,
                    description:'',
					logo:''
                };this.addForm.logo = null;
            },
            //编辑
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.editForm);
                            this.$http.post("/product/brand/add",para)
                                .then(res=>{
                                    this.editLoading = false;
                                    let data = res.data;
                                    if(data.success){
                                        this.$message({
                                            message: '提交成功',
                                            type: 'success'
                                        });
                                        this.$refs['editForm'].resetFields();//清空表单
                                        this.editFormVisible = false;//关闭模态框
                                        this.getBrands();//重新加载表格数据
                                    }else{
                                        this.$message({
                                            message: data.message,
                                            type: 'error'
                                        });
                                    }
                                })

                        });
                    }
                });
            },

            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.addForm);//对象的复制

                            this.$http.post("/product/brand/add",para)
                                .then(res=>{
                                    this.addLoading = false;
                                    let data = res.data;
                                    if(data.success){
                                        this.$message({
                                            message: '提交成功',
                                            type: 'success'
                                        });
                                        this.$refs['addForm'].resetFields();//清空表单
                                        this.addFormVisible = false;//关闭模态框
                                        this.getBrands();//重新加载表格数据
                                    }else{
                                        this.$message({
                                            message: data.message,
                                            type: 'error'
                                        });
                                    }
                                })

                        });
                    }
                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {
                var ids = this.sels.map(item => item.id).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    let para = { ids: ids };
                    batchRemoveUser(para).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getBrands();
                    });
                }).catch(() => {

                });
            }
        },
        //相当于jquery的$(function(){})
        mounted() {
            this.loadProductTypes();
            this.getBrands();
        }
    }

</script>

<style scoped>

</style>